<template>
  <div class="StylisticSer">

    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <div class="carousel"></div>

      <div class="listBox">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div
            v-for="(item, index) in list"
            :key="index"
            style="max-height: 200px;"
          >
            <!-- 通讯录行主体部分 -->
            <div class="mainBox">
              <div class="leftP" @click="toDet(item)">
                <div class="headp">
                  <img
                    :src="item.url? picUrl(item.url): require('../../assets/transfer/legalAdviser/headImg1_17.png')"
                  />
                </div>

                <div class="text">
                  <div class="namePhone">
                    <p class="itemname">{{item.serviceName}}</p>
                  </div>
                  <div class="posArea">
                    <p class="item">发布时间：{{item.updateTime}}</p>
                    <p class="item">联系人： {{item.contacts}}</p>
                    <p class="item">联系电话： {{item.servicePhone}}</p>
                  </div>
                </div>
              </div>

              <img
                class="phone"
                src="../../assets/treasureChest/thiredP/phoneIcon765.png"
                @click="callOut(item.servicePhone)"
              />

            </div>
            <van-divider />
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "StylisticSer",
  data() {
    return {
      list: [],
      finished: false,
      loading: false,

      pageSize: 10,
      pageIndex: 1,
      totalCount: 0
    };
  },
  methods: {
    back() {
      this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
      this.$router.back(); // 路由向后退一步
    },

    callOut(phoneNum) {
      this.$dialog
        .confirm({
          title: "拨打电话",
          message: "是否拨号：" + phoneNum
        })
        .then(() => {
          window.location.href = "tel://" + phoneNum;
        })
        .catch(() => {});
    },

    toDet(msg) {
      this.$router.push({
        path: "/serviceDet",
        query: {
          detData: msg
        }
      });
    },

    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        // 向平安看点list push数据
        this.loading = true;
        this.requestPostProblemService();
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= this.totalCount) {
          // 判断列表后台反馈数据总量=目前的数据量则结束
          this.finished = true;
        }
      }, 1000);
    },
    // 请求法律服务数据
    requestPostProblemService() {
      this.post("convenient_people/loadInfo/", {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        dataAreaCode: sessionStorage.getItem("dataAreaCode"),
        title: "",
        startTime: "2018-10-06 00:00:00",
        endTime: "2020-11-06 00:00:00",
        serviceType: 5
      })
        .then(res => {
          this.pageIndex += 1;
          console.log("problemService", res);
          this.list = this.list.concat(res.list);
          this.totalCount = res.pageIndex.totalCount;
        })
        .catch(err => {});
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";
.StylisticSer {
  .header {
    padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;

    position: absolute;
    width: $sm-img-per-max;
    height: 21px;
    background: $sm-bg-color;
    z-index: 2;

    display: flex;
    flex-direction: row nowrap;
    justify-content: flex-start;
    .backIcon {
      position: absolute;
      white-space: nowrap;
      height: $sm-icon-px-md;
      z-index: 4;

      .iconImage {
        height: $sm-icon-px-md;
        width: $sm-icon-px-md;
        transform: rotateY(180deg);
      }
    }

    .theme {
      position: absolute;
      font-weight: bold;
      width: $sm-img-per-max;
      text-align: center;
      white-space: nowrap;
      z-index: 3;
    }
  }

  .outermostMargin {
    background: $sm-bg-color-grey;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;

    overflow: auto;
    height: 100vh;
    // margin: 41px 0 0 0;

    .carousel {
      margin: 0;
      padding: 0;
      height: $sm-img-per-xm;
      width: $sm-img-per-max;

      background-image: url("../../assets/convenientService/thirdPage/problemSerBg.jpg");
      background-repeat: no-repeat;
      background-size: cover;

      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      color: $sm-text-color-inverse;
      font-size: $sm-font-sizeVH-base;
    }

    .listBox {
      background-color: $sm-bg-color;
      display: flex;
      flex-direction: column;

      .mainBox {
        padding: $sm-spaceing-block-base $sm-spaceing-block-base 0
          $sm-spaceing-block-base;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;

        position: relative;
        .phone{
          display: block;
          width: 40px;
          height: 40px;
          position: absolute;
          right: 15px;
          bottom: 0px;
        }

        .leftP {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;

          .headp {
            img {
              height: $sm-img-size-max;
            }
          }
          .text {
            height: $sm-img-size-max;

            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .namePhone {
              display: flex;
              flex-direction: row;
              justify-content: space-between;

              .itemname {
                margin: 0 0 $sm-spaceing-block-mini $sm-spaceing-block-mini;
                font-weight: bold;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                -webkit-box-orient: vertical;
                color: $sm-color-title;
                line-height: $sm-font-size-xxl;
              }

              .item {
                margin: 0 $sm-spaceing-block-mini $sm-spaceing-block-mini
                  $sm-spaceing-block-mini;
                font-size: $sm-font-sizeVH-sm;
                color: $sm-text-color-li;
              }
            }

            .posArea {
              display: flex;
              flex-direction: column;

              .item {
                margin: $sm-spaceing-block-xm;
                font-size: $sm-font-sizeVH-sm;
                color: $sm-text-color-li;
              }
            }
          }
        }
      }
    }
  }
}
</style>